<template>
    <div class="apply" v-if="show">

        <div id="apply" :class="apply_class">

            <!--S标题-->
            <h2>
                <span>扫一扫申请员工</span>
                <i
                        class="close iconfont icon-guanbi"
                        @click="$emit('close')"
                >
                </i>
            </h2>
            <!--E标题-->

            <!--S卡券内容-->
            <div id="content">
                <img v-lazy="qrcode" />
                <div class="refresh" v-if="show_refresh" @click="resetQrcode">
                    <div class="refresh-content">
                        <i class="iconfont icon-shuaxin"></i>
                        已失效，点击刷新二维码
                    </div>
                </div>
            </div>
            <!--E卡券内容-->

        </div>

    </div>
</template>

<script>
    let refreshTimer = null
    import Qrcode from "qrcode"
    export default {
        name: "apply",
        data() {
            return {
                // id 编辑区域class，控制打开关闭的动画
                apply_class: "close",
                // 二维码
                qrcode: '',
                // 是否显示刷新二维码区域
                show_refresh: false
            }
        },
        props: {
            // 区域显示状态
            show: {
                type: Boolean,
                default: false
            }
        },
        watch: {
            // 显示状态改变
            show() {
                this.toggle()
            },
            show_refresh(value) {
                if(value) {
                    this.$emit('scan')
                }
            }
        },
        destroyed() {
            clearInterval(refreshTimer)
        },
        methods: {
            /**
             * 显示隐藏区域*
             */
            toggle() {
                clearInterval(refreshTimer)
                if (this.show) {
                    setTimeout(() => {
                        this.apply_class = 'open'
                    }, 100)
                    this.resetQrcode()
                } else {
                    clearInterval(refreshTimer)
                    this.apply_class = 'close'
                }
            },
            /**
             * 重置二维码
             */
            resetQrcode() {
                clearInterval(refreshTimer)
                this.getQrcode()
                    .then(() => {
                        refreshTimer = setInterval(() => {
                            this.$sendGet('staff/test_apply_url',{
                                data: {
                                    scan_type: 'apply_staff'
                                }
                            })
                                .then((res) => {
                                    if(res.data.data === 0) {
                                        this.show_refresh = true
                                        clearInterval(refreshTimer)
                                    } else {
                                        this.show_refresh = false
                                    }
                                })
                        },1000)
                    })
            },
            /**
             * 获取二维码
             */
            getQrcode(){
                this.show_refresh = false
                return this.$sendGet("staff/apply_url",{
                    data: {
                        scan_type: 'apply_staff'
                    }
                })
                    .then((res) => {
                        Qrcode.toDataURL(res.data.data,{
                            margin: 0
                        },(err, url)=>{
                            this.qrcode = url
                        })
                    })
            }
        }
    }
</script>

<style scoped lang="less" src="./apply.less"></style>
